<template>
  <!-- html 结构 -->
  <div class="car">
    <h2>一辆 {{ car.brand }} 汽车，价值{{ car.price }}万</h2>
    <button v-on:click="addPrice">价格上调</button>
    <button @:click="subPrice">价格下调</button>
    <hr />
    <h2>游戏列表：</h2>
    <ul>
      <!-- :key ===>  v-bind:key -->
      <li v-for="game in games" :key="game.id">{{ game.name }}</li>
    </ul>
    <button @click="changeFirstGame">修改第一个游戏名字</button>
  </div>
</template>

<!-- 定义组件名 -->
<!-- <script lang="ts">
export default {
  name: "Person123",
};
</script> -->

<!-- 使用命令安装插件 "npm i vite-plugin-vue-setup-extend -D" -->
<!-- 修改vite.config.ts配置文件，1、导入插件import VueSetupExt from 'vite-plugin-vue-setup-extend'，2、然后追加调用VueSetupExt() -->
<!-- 在script标签上使用 name='组件名' -->
<script lang="ts" setup name="Car">
// 从vue引入ref函数
import { reactive, ref } from "vue";
// 响应式数据，re
let car = ref({ brand: "奔驰", price: 100 });
let games = ref([
  { id: "123", name: "王者荣耀" },
  { id: "124", name: "英雄联盟" },
  { id: "125", name: "流星蝴蝶剑" },
]);
// reactive只能定义对象数据类型
// let name = reactive('zhangsan')

function addPrice() {
  car.value.price += 10;
  console.log(car.value.price);
  console.log(car);
}
function subPrice() {
  car.value.price -= 10;
  console.log(car.value.price);
}
function changeFirstGame() {
  games.value[0].name = "绝地求生";
}
</script>

<style>
/* 样式 */
.car {
  background-color: rgb(102, 105, 93);
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 10px;
}

button {
  /* 上下是0，左右10个像素 */
  margin: 0 5px;
}

li {
  font-size: 20px;
}
</style>
